<template>
	<div>
		<script :id="'editor' + id" type="text/plain"></script>
		<upload :domain="domain" :limit="5" :fileList="picList" :maxSize="20" 
		:appid="appid" 
		:field="'picList'" 
		:isUeditor="'true'" 
		@insertPic="insertPic" 
		@delPic="delPic"
		ref="upload">
		</upload>
	</div>
</template>

<script>
import 'static/ue/ueditor.config.js'
import 'static/ue/ueditor.all.js'
import 'static/ue/lang/zh-cn/zh-cn.js'
import 'static/ue/ueditor.parse.min.js'
import Upload from "pc/common/Upload"

export default {
	props: {
		id: 0,
		value: '',
		config: {},
		domain: '', 
		appid: '',
	},
	name: 'ue',
	data () {
		return {
			editor: null,
			/*上传的图片*/
			picList: [],
		}
	},
	components: {
		Upload
	},
	mounted () {
		this.addCustomizeButton('editor' + this.id)//加载自定义上传图片按钮
		this.editor = window.UE.getEditor('editor' + this.id, this.config)
		this.editor.addListener('ready', () => {
			// this.editor.setContent(this.value)
		})
		/*失去焦点*/
		this.editor.addListener('blur', () => {
			this.$emit('getUeditorLength', this.editor.getContent().length, this.id)
		})
	},
	watch: {
		'value': function (val) {
			this.editor.ready(()=>{
				this.editor.setContent(val)
			})
		}
	},
	methods: {
		/*清空内容*/
		setUEContentEmpty () {
			this.editor.execCommand('cleardoc')
		},
		/*取出内容*/
		getUEContent () {
			return this.editor.getContent()
		},
		/*设置内容*/
		// setUEContent (val) {
		// 	setTimeout(()=>{
		// 		this.editor.setContent(val)
		// 	},1000)
		// },
		/*增加 上传图片按钮*/
		addCustomizeButton (editorObj) {
			// console.log('1')
			window.UE.registerUI('插入图片', (editor, uiName) => {
				editor.registerCommand(uiName, {
					execCommand: () => {
						// alert('execCommand:' + uiName)
						this.$refs.upload.clickUpload()
					}
				});

				//创建一个button
				var btn = new UE.ui.Button({
					//按钮的名字
					name:uiName,
					//提示
					title:uiName,
					//需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
					cssRules :'background-position: -726px 403px;',
					//点击时执行的命令
					onclick:function () {
						//这里可以不用执行命令,做你自己的操作也可
						editor.execCommand(uiName);
					}
				});

				//当点到编辑内容上时，按钮要做的状态反射
				editor.addListener('selectionchange', function () {
					var state = editor.queryCommandState(uiName);
					if (state == -1) {
						btn.setDisabled(true);
						btn.setChecked(false);
					} else {
						btn.setDisabled(false);
						btn.setChecked(state);
					}
				});

				//因为你是添加button,所以需要返回这个button
        		return btn;

			}, 44/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/
    		);
		},
		/*插入上传的图片*/
		insertPic(list, field){
			let insert = '';
			for(let i=0; i<list.length; i++){
				/*注释原因：不需要把已经上传的图片放到列表中，这样可以每次都可以上传最大限度的图片数量*/
				// this[field].push(
				// 	{
				// 		name: '',
				// 		url:  list[i].url
				// 	}
				// )
				insert += '<img src="' + this.domain + list[i].url + '">'
			}
			window.UE.getEditor('editor' + this.id).execCommand('insertHtml', insert)//插入光标的所在的位置
		},
		/*删除上传的图片*/
		delPic(index, field){
			this[field].splice(index, 1)
		},
	},
	/*销毁实例*/
	destroyed () {
		// window.UE.delEditor('editor' + this.id)
		this.editor.destroy()
	}
}
</script>